<template>
  <div>
    <div class="optionButton">
      <el-select @change="changeData" v-model="dayFind">
        <el-option label="今日" value="1"></el-option>
        <el-option label="近一周" value="7"></el-option>
        <el-option label="所有时间" value="0"></el-option>
      </el-select>
    </div>
    <div>
      <div ref="chart" style="width: 600px; height: 400px;"></div>
      <div
        ref="combo"
        style="width: 600px; height: 400px;float: right;margin-top: -402px"
      ></div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import { findExchangeRecords } from '@/api/excharPic'

const chart = ref()
const combo = ref()
const dayFind = ref()

onMounted(async () => {
  await fetchData()
})

const fetchData = async () => {
  const { result } = await findExchangeRecords(0)
  setChartOption(result.addressList, result.countList)
  // setCombo(data.comboInfo.months, data.comboInfo.bigDecimals)
}
const changeData = async () => {
  console.log(dayFind.value)
  if (dayFind.value === undefined || dayFind.value === '') {
    dayFind.value = 0
  }
  const { result } = await findExchangeRecords(dayFind.value)
  setChartOption(result.addressList, result.countList)
}
const setChartOption = (addressList, countList) => {
  const myChart = echarts.init(chart.value)
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '电站换电统计',
    },
    tooltip: {},
    // legend: {
    //   data: ['地址'],
    // },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
      },
      data: addressList.map((item, index) => {
        return item
      }),
    },
    yAxis: {},
    series: [
      {
        name: '换电次数',
        type: 'bar',
        data: countList,
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

// const setCombo = ( months,bigDecimals) => {
//
// // 基于准备好的dom，初始化echarts实例
//   const myChart = echarts.init(combo.value)
// // 指定图表的配置项和数据
//   var option = {
//     title: {
//       text: '每月套餐总额统计',
//     },
//     tooltip: {
//       trigger: 'axis'
//     },
//     legend: {
//       data: ['线1', '线2']
//     },
//     xAxis: {
//       type: 'category',
//       data: months,
//     },
//     yAxis: {
//       type: 'value'
//     },
//     series: [{
//       name: '套餐总额',
//       type: 'line',
//       data: bigDecimals
//     }]
//   };
//
// // 使用刚指定的配置项和数据显示图表。
//   myChart.setOption(option);
//
// }
</script>

<style scoped></style>
